<!-- src/components/GlobalUserBar.vue -->
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { SettingIcon, PoweroffIcon } from 'tdesign-icons-vue-next'
const BASE_PATH = import.meta.env.VITE_API_BASE_PATH

const router = useRouter()
// 用户信息（假设从store或localStorage获取）
const userInfo = ref({
  name: localStorage.getItem('username') || '未登录',
  avatar: 'https://tdesign.gtimg.com/site/avatar.jpg'
})
const dropdownVisible = ref(false)



// 用户相关路由
const editProfile = () => {
  dropdownVisible.value = false
  router.push({ path: BASE_PATH + '/settings' })
}
const logout = () => {
  dropdownVisible.value = false
  // 这里添加登出逻辑
  router.push({ path: BASE_PATH + '/' })
}
</script>

<template>
  <div class="user-info-container">
    <div class="user-info" @click="dropdownVisible = !dropdownVisible">
      <img :src="userInfo.avatar" class="user-avatar" />
      <span class="user-name">{{ userInfo.name }}</span>
      <t-icon name="chevron-down" class="dropdown-icon" />
    </div>
    <div v-show="dropdownVisible" class="dropdown-menu">
      <div class="menu-item" @click="editProfile">
        <SettingIcon class="menu-icon" />
        <span>修改用户名</span>
      </div>
      <div class="menu-item" @click="logout">
        <PoweroffIcon class="menu-icon" />
        <span>退出登录</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.user-info-container {
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 1000;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.dropdown-menu {
  position: absolute;
  right: 0;
  top: 45px;
  background: white;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  .user-info {
    padding: 4px 8px;
  }
  .user-name {
    display: none;
  }
}

/* 下拉菜单样式 */
.dropdown-menu {
  position: absolute;
  right: 0;
  top: 45px;
  min-width: 160px;
  background: white;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: 1000;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.menu-item:hover {
  background-color: #f5f5f5;
}

.menu-icon {
  margin-right: 8px;
  font-size: 16px;
  color: #555;
}

/* 用户信息样式 */
.user-info-container {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 100;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.user-info:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
}

.dropdown-icon {
  font-size: 12px;
  transition: transform 0.3s;
}

.user-info:hover .dropdown-icon {
  transform: rotate(180deg);
}

</style>